﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="equipmentListTable" class="main-content">
    <h3 class="page-title">设备信息管理Equipment information management</h3>

    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">条件查询Condition query</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body container-fluid">
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备编号Equipment number</span>
                        <input type="text" class="form-control" v-model="searchModel.queryCode" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备名称Equipment name</span>
                        <select class="form-control" v-model="searchModel.queryName">
                            <option v-for="(value, key, idx) in typeDictionary" v-bind:value="key">{{key}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备型号Equipment model</span>
                        <input type="text" class="form-control" v-model="searchModel.queryModel" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备序列号Equipment serial number</span>
                        <input type="text" class="form-control" v-model="searchModel.querySn" />
                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">设备状态Equipment status</span>
                        <select class="form-control" v-model="searchModel.queryStatus">
                            <option v-for="(value, key, idx) in statusDictionary" v-bind:value="value">{{key}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">所属客户Belonging customer</span>
                        <input type="text" class="form-control" v-model="searchModel.queryClient" />
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">负责人Assigner</span>
                        <select class="form-control" v-model="searchModel.queryAssignerID">
                            <option v-for="(value, key, idx) in assignerDictionary" v-bind:value="value.UserInfo.ID">{{value.UserInfo.NameChs}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">管理人Manager</span>
                        <select class="form-control" v-model="searchModel.queryManagerID">
                            <option v-for="(value, key, idx) in managerDictionary" v-bind:value="value.UserInfo.ID">{{value.UserInfo.NameChs}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <br />
                    <button class="btn btn-default btn-sm" v-on:click="SearchReset">
                        <i class="fa fa-eraser"></i> 清空empty
                    </button>
                    <button class="btn btn-default btn-sm" v-on:click="SearchEquipment">
                        <i class="fa fa-search"></i> 查询query
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <button class="btn btn-primary" v-on:click="AddEquipment">
                <i class="fa fa-plus"></i> 新增设备信息New equipment information
            </button>
            <button class="btn btn-default" v-on:click="ExportEquipment()" v-bind:disabled="isExportDisabled">
                <i class="fa fa-download"></i> 导出设备信息Export device information <i v-if="isExportLoading" class="fa fa-spinner fa-spin"></i>
            </button>
            <br />
            <br />
            <table class="table table-striped" v-if="isNotEmptyObject(pageModel.results)">
                <thead>
                    <tr>
                        <td colspan="11">
                            <div class="form-inline text-right">
                                <label class="control-label">每页记录数Records per page：</label>
                                <select class="form-control input-sm" style="width:auto;" v-model="pageModel.pageSize">
                                    <option value="10">10条Article 10</option>
                                    <option value="30">30条Article 30</option>
                                    <option value="50">50条Article 50</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID <a href="#" v-on:click="ChangeOrderById($event)"><i class="fa fa-angle-up"></i></a></th>
                        <th>设备编号Equipment number <a href="#" v-on:click="ChangeOrderByCode($event)"><i class="fa fa-angle-up"></i></a></th>
                        <th>设备名称Equipment name <a href="#" v-on:click="ChangeOrderByName($event)"><i class="fa fa-angle-up"></i></a></th>
                        <th>设备型号Equipment model</th>
                        <th>设备序列号Equipment serial number</th>
                        <th>使用场所Place of use</th>
                        <th>所属客户Belongingcustomer</th>
                        <th>状态state</th>
                        <th>负责人person in charge</th>
                        <th>管理人administrator</th>
                        <th>操作operation</th>
                    </tr>
                </thead>
                <tbody v-for="(equipment, index) in pageModel.results">
                    <tr v-bind:class="equipment.BaseInfo.Status == 0 ? 'danger': (equipment.BaseInfo.Status == 2 ? 'success': '')">
                        <td>{{equipment.BaseInfo.ID}}</td>
                        <td>{{equipment.BaseInfo.Code}}</td>
                        <td>{{equipment.BaseInfo.Name}}</td>
                        <td>{{equipment.BaseInfo.Model}}</td>
                        <td>{{equipment.BaseInfo.Sn}}</td>
                        <td>{{equipment.BaseInfo.Floor}}</td>
                        <td>{{equipment.BaseInfo.Client}}</td>
                        <td>
                            <span v-for="(value, key, idx) in statusDictionary">
                                <span v-if="value == equipment.BaseInfo.Status">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <span v-if="isNotEmptyObject(equipment.AssignerInfo)">{{equipment.AssignerInfo.NameChs}}</span>
                        </td>
                        <td>
                            <span v-if="isNotEmptyObject(equipment.ManagerInfo)">{{equipment.ManagerInfo.NameChs}}</span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm" v-on:click="EditEquipment(equipment.BaseInfo.ID)">
                                <i class="fa fa-edit"></i> 详细detailed
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" v-on:click="DeleteEquipment(equipment.BaseInfo.ID)">
                                <i class="fa fa-trash"></i> 删除delete
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="11">
                            <nav class="text-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="pageModel.pageIdx > 1">
                                        <a href="#" aria-label="Previous" v-on:click="GotoPage(pageModel.pageIdx - 1)">
                                            <span aria-hidden="true">
                                                <i class="fa fa-angle-left"></i> 上一页previous page
                                            </span>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx != 1">
                                        <a href="#" v-on:click="GotoPage(1)">
                                            <i class="fa fa-step-backward"></i>
                                        </a>
                                    </li>
                                    <template v-for="idx in pageModel.pageLength">
                                        <li v-if="pageModel.pageIdx - idx > -5 && pageModel.pageIdx - idx < 5 " v-bind:class="pageModel.pageIdx == idx ? 'active' : ''">
                                            <a href="#" v-on:click="GotoPage(idx)">{{idx}}</a>
                                        </li>
                                    </template>
                                    <li v-if="pageModel.pageIdx != pageModel.pageLength">
                                        <a href="#" v-on:click="GotoPage(pageModel.pageLength)">
                                            <i class="fa fa-step-forward"></i>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx < pageModel.pageLength">
                                        <a href="#" aria-label="Next" v-on:click="GotoPage(pageModel.pageIdx + 1)">
                                            <span aria-hidden="true">
                                                下一页next page <i class="fa fa-angle-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">设备信息导入Equipment information import</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body row">
            <div class="col-sm-6 input-group input-group-sm">
                <span class="input-group-addon">请选择文件Please select a file</span>
                <input type="text" class="form-control" placeholder="点击此处选择Click here to select" v-model="uploadFileName" v-on:click="SelectFile($event)" readonly v-bind:disabled="isImportDisabled">

                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" v-on:click="UploadFile()" v-bind:disabled="isImportDisabled">
                        <i class="fa fa-cloud-upload"></i> 导入Import <i v-if="isImportLoading" class="fa fa-spinner fa-spin"></i>
                    </button>
                </span>
            </div>
            <br />
            <div class="alert alert-warning alert-dismissible" role="alert">
                <i class="fa fa-warning"></i>
                <p>如果导入格式修改，需要与管理员联系If the import format is modified, you need to contact the administratorIf the import format is modified, you need to contact the administrator。</p>
                <p>导入相同数据时，系统会根据设备编号更新相应数据，不会造成重复When importing the same data, the system will update the corresponding data according to the equipment number without duplication。</p>
            </div>
        </div>
    </div>

</div>


@section scripts{
    <script type="text/javascript" src="~/Scripts/pageJs/Equipment/Index.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
}

